<template>
  <!-- 首页-按机构选择相机 -->
  <div
    class="imColumn1 camera-trees-jaksldjfklasaskdljfklasdjfklasdl"
    style="margin-right: 10px; padding: 10px; height: 100% !important"
    v-loading="loading"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="head-container">
      <el-input
        v-model="deptName"
        placeholder="请输入部门名称"
        clearable
        size="small"
        style="margin-bottom: 20px"
        @keyup.enter.native="searchEnter"
      >
        <i
          slot="suffix"
          class="el-input__icon el-icon-search"
          @click="searchEnterNow"
        ></i>
      </el-input>
    </div>

    <el-tree
      class="tree-content imscrollo"
      :render-content="renderContent"
      :data="sourceData"
      :props="defaultProps"
      :filter-node-method="filterNode"
      ref="tree"
      accordion
      @node-click="handleNodeClick"
    />
  </div>
</template>

<script>
import { getCamerasIndex } from "./map/api";
export default {
  name: "common-camera-trees",
  props: {
    sourceData: Array,
  },

  components: {},

  data() {
    return {
      tttt: "",
      currentData: null,
      loading: false,
      queryParams: {
        deptId: -99,
      },
      deptName: undefined, // 机构名称
      // 部门树选项
      deptOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },

  created() {},

  mounted() {
    // 解决el-tootip快速滑动 页面右侧滚动条抖动
    document
      .querySelector("body")
      .setAttribute("style", "overflow:hidden;!important");
  },

  activated: function () {},

  beforeDestroy() {
    // 解决el-tootip快速滑动 页面右侧滚动条抖动 去除css
    document
      .querySelector("body")
      .removeAttribute("style", "overflow:hidden;!important");
  },

  methods: {
    searchEnterNow() {
      this.$refs.tree.filter(this.deptName);
    },

    /**
     * 按回车直接搜索
     */
    searchEnter(e) {
      var keycode = window.event ? e.keyCode : e.which;
      if (keycode == 13) {
        this.$refs.tree.filter(this.deptName);
      }
    },

    // 解决树结点过长的问题
    ellipsis(value, len) {
      if (!value) return "";
      if (value.length > len) {
        return value.slice(0, len) + "...";
      }
      return value;
    },

    /**
     * 树结构渲染
     */
    renderContent(h, { node, data, store }) {
      let nodeClassName;
      nodeClassName = "org-tree"; // 山高图标

      // 点击组织或相机
      if (
        this.queryParams.deptId == data.camId ||
        this.queryParams.deptId == data.id
      ) {
        return (
          // <svg-icon icon-class={camType} /> 原来在第二行
          <span style="font-size:10px;cursor:pointer;color:#06A2FE;font-weight:bold;background-color:transparent">
            <svg-icon class-name={nodeClassName} icon-class={nodeClassName} />
            <span style="padding-left:5px;">
              {this.ellipsis(node.label, 20)}
            </span>
          </span>
        );
      } else {
        return (
          <span style="font-size:10px;cursor:pointer;">
            <svg-icon class-name={nodeClassName} icon-class={nodeClassName} />

            <el-tooltip
              content={node.label}
              placement="top"
              popper-class="tiptip"
              open-delay={300}
            >
              <span style="padding-left:5px;">
                {this.ellipsis(node.label, 20)}
              </span>
            </el-tooltip>
          </span>
        );
      }
    },

    /**
     * 遍历树
     */
    getttt(val) {
      val.forEach((item) => {
        if (item.children) {
          this.getttt(item.children);
        } else {
          // 无children机构
          if (
            item.camLat == null &&
            item.camLong == null &&
            item.camId == null
          ) {
            this.tttt += item.label + "_" + item.id + ",";
          }
        }
      });
    },

    // 筛选节点
    filterNode(value, data, node) {
      if (!value) return true;
      let parentNode = node.parent,
        labels = [node.label],
        level = 1;
      while (level < node.level) {
        labels = [...labels, parentNode.label];
        parentNode = parentNode.parent;
        level++;
      }
      return labels.some((label) => label.indexOf(value) !== -1);
    },

    // 节点单击事件
    async handleNodeClick(data, node, obj) {
      console.log(data, "节点data");
      console.log(node, "节点node");
      var da = data;
      if (!node.isLeaf) {
        // 查询机构相机
        this.loading = true;
        await getCamerasIndex({
          deptId: data["id"],
        })
          .then((res) => {
            console.log(res);
            this.loading = false;
            da["list"] = res.data;
            console.log(da, "dadadadda");
          })
          .catch((err) => {
            this.loading = false;
          });
      }

      this.currentData = data;

      if (data.camId != null && data.camId != undefined) {
        // this.queryParams.deptId = parseFloat(data.camId)
        da["deptName"] = node["parent"]["data"]["label"];
      } else {
        // this.queryParams.deptId = data.id
      }
      this.$emit("orgClick", da);
      // }
    },
  },

  watch: {
    sourceData: {
      handler(val, oldVal) {
        if (val == null || val == undefined || val.length == 0) {
          // this.loading = true
        } else {
          // this.loading = false
        }
      },
      deep: true,
      immediate: true,
    },

    /**
     * 机构名称
     */
    deptName: {
      handler(val, oldVal) {
        if (val == null || val == undefined || val === "") {
          if (this.$refs.tree != null && this.$refs.tree != undefined) {
            this.$refs.tree.filter("");
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style scoped lang="scss">
.tree-content {
  height: calc(100% - 110px);
}
</style>

<style lang="scss">
.camera-trees-jaksldjfklasaskdljfklasdjfklasdl {
  .el-input--small .el-input__inner {
    color: white !important;
    opacity: 0.8;
  }

  .el-input__inner {
    background-color: transparent !important;
  }

  .el-tree {
    background: transparent !important;
    color: white !important;
  }

  .imscrollo {
    overflow: scroll;
  }

  .imscrollo::-webkit-scrollbar {
    display: none;
  }

  // .el-tree-node__content {
  //   font-size: 10px!important;
  // }

  .el-tree-node__content:hover {
    // background-color: #B0C4DE!important;
    background: linear-gradient(
      to right,
      rgb(3, 22, 39),
      rgb(16, 87, 139)
    ) !important;
  }

  // 点击小图标展开时 当前行高亮为白色了 改变颜色
  .el-tree-node:focus > .el-tree-node__content {
    background-color: transparent !important;
  }

  // tooltip抖动问题 useless
  .el-tooltip__popper.is-dark {
    top: -500px;
  }

  .tiptip.is-dark {
    top: -500px !important;
  }

  // tooltip
  .wrap {
    position: relative;
    display: inline-block;
  }

  .tips {
    position: absolute;
    display: none;
    z-index: 9;
    padding: 6px;
    transition: opacity 0.2s;
    background-color: #062b45;
    border-radius: 4px;
    margin-left: -10px;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre-wrap;
    width: 100%;
  }

  .wrap:hover .tips {
    display: block;
  }

  .org-tree {
    background: url()
      50% no-repeat;
  }
}
</style>